<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="../../common.css">
<style>
    .box {
        width: 160px;
        height: 100px;
        background-image: radial-gradient(circle at 9px 8px, transparent 0%, transparent 8px, orange 8px, orange 100%);
        background-position: 121px -8px;
        background-size: 100% 100px;
    }

    .box1 {
        width: 160px;
        height: 100px;
        background: radial-gradient(circle at 0 51px, transparent 15px, orange 6px) top left, linear-gradient(0.25turn, orange, #FE5151), radial-gradient(circle at 18px 51px, transparent 15px, #FE5151 16px) bottom right;
        background-size: 17px 100px, 116px 100px, 17px 100px;
        background-repeat: no-repeat;
        background-position: 10px 0px, 26px 0px, 142px 0px;
    }

    .box2 {
        width: 160px;
        height: 100px;
        background: linear-gradient(0.25turn, orange, #FE5151), radial-gradient(circle at 11px 4px, transparent 6px, #FE5151 6px) top left, radial-gradient(circle at 10px 56px, transparent 6px, #FE5151 6px) bottom left, linear-gradient(0.25turn, #FE5151, #fe434c);
        background-size: 120px 82px, 20px 50px, 20px 57px, 32px 84px;
        background-repeat: no-repeat;
        background-position: 0px 0px, 120px -4px, 120px 26px, 140px 0px;
    }
</style>

<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>